import React from "react";
import './category.scss';
import {getCategoriesAction} from "../../actions/categoryAction";

export class CategoryComponent extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            category:[],
            className:['qiche','fengchuangboliguashuiqi','chelun','youqishua','jinguangdeng']
        }
    }

    componentDidMount(){

        getCategoriesAction().then(res=>{

            this.state.category = res.items;

        })

    }

    render(){

        return <div className="category">
            {
                this.state.category.map(function (value,index) {

                    return <span className={this.props.selectedCategoryId === value.id ? 'selected' : ''}
                                 key={value.id}
                                 onClick={e=>{this.props.switchCategory(value.id)}}
                    >
                        <svg className="icon" aria-hidden="true">
                            <use xlinkHref={"#icon-" + this.state.className[index]} />
                        </svg>
                        {value.name}
                    </span>
                },this)
            }
        </div>

    }

}